<template>
  <view>
    <!-- <view class="search_box">
      <u-search
        placeholder="请输入查询内容"
        v-model="listForm.searchValue"
        :showAction="false"
        @search="resetSearch"
      ></u-search>
    </view> -->
    <view class="pageLayout">
      <view
        class="cus_car"
        v-for="item in dataList"
        :key="item.approveID"
        @click="gotoDetail(item)"
      >
        <view class="cus_box"> {{ item.approveTopic }} </view>
        <view class="time_detail">发起时间：{{ item.startTime }}</view>
        <view class="contain_row">
          <view class="contain_item">
            <view class="contain_title">计划完成时间</view>
            <view class="contain_val">{{
              formatTimestamp(item.expectedTime, "onlyDate")
            }}</view>
          </view>
          <view class="contain_item">
            <view class="contain_title text-center">项目费用</view>
            <view class="contain_val text-center"
              >￥{{ item.costAmount | unitConverter }}</view
            >
          </view>
          <view class="contain_item">
            <view class="contain_title text-center">剩余天数</view>
            <view class="contain_val text-center">{{ item.remainDay }}</view>
          </view>
        </view>
        <view class="status_img_box">
          <image
            v-if="item.remainDay < 0"
            class="status_img"
            src="@/static/images/extended_right_ico.png"
          />
          <!-- <image
            v-if="
              item.approveProcessState == 'ProcessEnd' ||
              item.approveProcessState == 'OverdueEnd'
            "
            class="status_img"
            src="@/static/images/completed_right_ico.png"
          /> -->
        </view>
      </view>
      <view v-if="dataList.length == 0">
        <u-empty mode="list"> </u-empty>
      </view>
    </view>
    <mytoast ref="toastRef" />
  </view>
</template>

<script>
import store from "../../store/index";
import {
  queryProcessPageList,
  reject,
  approve,
  queryInProgressProcessPageListByID
} from "../api/approval/index.js";
import mytoast from "@/components/mytoast.vue";
export default {
  components: {
    mytoast,
  },
  data() {
    return {
      id: null,
      name: null,
      dataList: [],
      type: null,
      listForm: {
        pageIndex: 1,
        pageSize: 8,
        searchValue: "",
        startID: "",
        // processQueryType: "InProgress",
      },
      adminType: null,
      showReject: false,
      isMore: false,
      loading: false,
      totalPages: 0, //总页数
      totalCount: 0, //总条数
      chengzongList: ["Commit"],
      sonzongList: ["Commit", "OneReject", "OnePass"],
      form: {
        content: "",
        approveID: "",
      },
      rules: {
        content: [
          {
            type: "string",
            required: false,
            message: "审批意见",
            trigger: ["blur"],
          },
        ],
      },
      tabsList: [
        {
          name: "推进中",
          val: "InProgress",
        },
        {
          name: "已超期",
          val: "Overdue",
        },
        {
          name: "已完成",
          val: "Completed",
        },
      ],
      activityTab: "InProgress",
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  onLoad(options) {
    this.listForm.startID = options.id;
    this.name=options.name
    console.log(this.listForm);
    uni.setNavigationBarTitle({
            title: this.name+'项目推进',
          })
    
    // this.resetSearch();
  },
  methods: {
    /**
     * 跳转详情
     */
    gotoDetail(item) {
      // console.log(item);
      // return
      uni.navigateTo({
        url: "/pagesA/approval/pushDetail?id=" + item.approveID,
      });
    },
    /**
     * 头部按钮
     * @param item 菜单项
     */
    changeTabs(item) {
      this.listForm.processQueryType = item.val;
      this.resetSearch();
    },
    /**
     * 关闭审核弹窗
     */
    closeForm() {
      this.form = {
        content: "",
        approveID: "",
      };
      this.showReject = false;
      this.$refs.MyForm.resetFields();
    },
    /**
     * 驳回
     */
    rejectApprove(item) {
      this.form.approveID = item.approveID;
      this.type = 1;
      this.showReject = true;
    },
    /**
     * 同意
     */
    agreeApprove(item) {
      console.log(item);
      this.form.approveID = item.approveID;
      this.type = 2;
      this.showReject = true;
    },
    /**
     * 点击列表跳转详情页
     */
    clickItem(item) {
      console.log(item, "item");

      uni.navigateTo({
        url: "/pagesA/approval/apply?id=" + item.approveID,
      });
    },
    /**
     * 获取列表
     */
    getList() {
      this.isMore = true;
      this.loading = true;
      console.log(this.listForm, "this.listForm");
      
      queryInProgressProcessPageListByID(this.listForm)
        .then((res) => {
          console.log(res);
          this.adminType = res.data.adminType;
          console.log(this.adminType, "this.adminType");

          this.dataList = [...this.dataList, ...res.data.items];
          this.totalPages = res.data.data.totalPages;
          this.isMore = false;
          this.loading = false;
          
        })
        .catch((e) => {
          this.isMore = false;
          this.loading = false;
          let message;
          if (e.data && e.data.detail) {
            message = e.data.detail;
          } else {
            message = e.errorMsg;
          }
          uni.showToast({
            title: message,
            icon: "none",
            duration: 2000,
          });
        });
    },
    /**
     * 重置分页
     */
    resetSearch() {
      console.log(123);
      this.listForm.pageIndex = 1;
      this.dataList = [];
      this.getList();
    },
  },
  onShow() {
    this.resetSearch();
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.MyForm.setRules(this.rules);
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {
    if (this.isMore) {
      return;
    }
    if (this.listForm.pageIndex < this.totalPages) {
      this.listForm.pageIndex++;
      this.getList();
    }
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.pageLayout {
  padding: 24rpx;
}
.cus_car {
  background-color: #ffffff;
  padding: 24rpx;
  box-sizing: border-box;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  position: relative;
  overflow: hidden;
  .status_img_box {
    position: absolute;
    width: 132rpx;
    height: 132rpx;
    top: 0;
    right: 0;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .top {
    display: flex;
    color: #1c1b2680;
    font-size: 20rpx;
    justify-content: flex-end;
  }
  .cus_box {
    font-weight: 700;
    color: #000000;
    font-size: 32rpx;
  }

  .time_detail {
    font-size: 26rpx;
    color: #c8c9cc;
    margin-top: 10rpx;
    margin-bottom: 40rpx;
  }
  .contain_row {
    display: flex;
    .contain_item {
      width: 218rpx;
    }
    .contain_title {
      color: #c8c9cc;
      font-size: 26rpx;
      margin-bottom: 8rpx;
    }
    .contain_val {
      font-family: DIN;
      font-size: 28rpx;
      font-weight: bold;
    }
  }
}
.row2 {
  display: flex;
  justify-content: space-between;
}
.search_box {
  background-color: #ffffff;
  padding: 20rpx;
}
.btn_apply {
  position: fixed;
  bottom: 150rpx;
  right: 30rpx;
  width: 100rpx;
  height: 100rpx;
  background-color: #a22d27;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  font-size: 30rpx;
  line-height: 100rpx;
  border-radius: 50%;
  box-shadow: 0 0 10rpx #a22d27;
}
.btn_box {
  margin-top: 30rpx;
}
.base_info {
  margin-top: 20rpx;
  padding: 20rpx;
  height: 400rpx;
}
.btn_capsule {
  margin-top: 20rpx;
  display: flex;
  box-sizing: border-box;
  padding: 24rpx;
  .capsule_item {
    padding: 8rpx 20rpx;
    font-size: 28rpx;
    color: #969799;
    // color: ;
  }
  .capsule_item_active {
    border: 1px solid #a22d27;
    color: #a22d27;
    border-radius: 10rpx;
  }
}
.text-center {
  text-align: center;
}
</style>
